<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item label="num">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.num
          "
        />
      </px-form-item>
      <px-form-item label="tip">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.tip
          "
        />
      </px-form-item>
      <px-form-item label="routerKey">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.routerKey
          "
        />
      </px-form-item>
      <px-form-item label="type">
        <px-select
          v-model="
            //@ts-ignores
            curComponent.propValue.type
          "
          class="m-2"
          placeholder="选择类型"
          @change="typeChange"
        >
          <px-option v-for="item in options" :key="item" :label="item" :value="item" />
        </px-select>
      </px-form-item>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const options = ref(["people", "sensor", "temperature", "camera", "callin", "error"]);
const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
const typeChange = item => {
  //@ts-ignores
  curComponent.value.propValue.filter = `menu_all menu_${item}`;
};
</script>
